import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaSwitch, WeaTableNew } from 'comsMobx';
import { WeaTab, WeaTools, WeaFormItem, WeaSearchGroup, WeaProgress } from 'ecCom';
import { toJS } from 'mobx';

const WeaTable = WeaTableNew.WeaTable;

@inject('reportStore')
@inject('reportFlowEchartDetailListDialogStore')
@observer
// 流程图形统计更多
class ReportFlowEchartDetailListDialogComponent extends React.Component {
  componentWillReceiveProps(nextProps) {
    const { reportFlowEchartDetailListDialogStore } = this.props;
    if (this.props.searchParams !== nextProps.searchParams) {
      const { searchParams } = nextProps;
      const p2 = { name: nextProps.name };
      Object.assign(searchParams, searchParams, p2);
      reportFlowEchartDetailListDialogStore.doSearch(searchParams);
    }
  }

  componentDidMount() {
    const { reportFlowEchartDetailListDialogStore } = this.props;
    const { searchParams } = this.props;
    const p2 = { name: reportFlowEchartDetailListDialogStore.condition_name };
    Object.assign(searchParams, searchParams, p2);
    reportFlowEchartDetailListDialogStore.doSearch(searchParams);
  }

  renderSearchAdForm() {
    const { reportFlowEchartDetailListDialogStore } = this.props;
    const conditioninfo = toJS(reportFlowEchartDetailListDialogStore.searchCondition.condition);
    const { form } = reportFlowEchartDetailListDialogStore;
    const { isFormInit } = form;
    let group = [];
    isFormInit && conditioninfo.map((c, index) => {
      let items = [];
      c.items.map((field) => {
        let col = 2;
        if (field.conditionType.toUpperCase() == WeaTools.types.CASCADER) col = 1;
        items.push({
          com: (
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@uofco2@${field.domkey[0]}`}
              label={`${field.label}`}
              labelCol={{ span: `${field.labelcol}` }}
              ratio1to2
              error={form.getError(field)}
              tipPosition="bottom"
              wrapperCol={{ span: `${field.fieldcol}` }}
            >
              <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@l38f6y@${field.domkey[0]}`} fieldConfig={field} form={form} onEnterSearch={() => this.doSearch()} />
            </WeaFormItem>
          ),
          col,
          hide: form.isHide(field, () => false),
        });
      });
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@blusc3@${index}`} needTigger={false} showGroup={true} items={items} />);
    });
    return (<div>{group}</div>);
  }

  render() {
    const { reportFlowEchartDetailListDialogStore } = this.props;
    return (
      <div>
        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@aikao1`}
          searchType={['base']} // 搜索类型
          showSearchAd={reportFlowEchartDetailListDialogStore.showSearchAd}
          onSearch={() => this.doSearch()}
          onSearchChange={v => reportFlowEchartDetailListDialogStore.setSearchsBaseValue(v)}
        />
        <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@8ewltc`}
          hasOrder={true}
          needScroll={true}
          comsWeaTableStore={reportFlowEchartDetailListDialogStore.tableStore}
          getColumns={this.getColumns}
          scroll={{ y: 550 }}
        />
      </div>
    );
  }

  getColumns = (columns) => {
    let newColumns = columns.map((column) => {
      if (column.dataIndex == 'num') {
        return {
          ...column,
          render: (text, record) => (<WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@vxuafo@${column.dataIndex}`} percent={record.numspan} format={() => record.num} />),
        };
      }
      return column;
    });
    return newColumns;
  }
}

export default ReportFlowEchartDetailListDialogComponent;
